<template>
    <div>
        <h3>{{ msg }}</h3>
		<br>
        <h4>商品名称：{{ name }}</h4>
        <h4>商品价格：￥{{ price }}</h4>
		<!-- 商品评论 -->

        <textarea v-model="comment" rows="10" v-autosize v-wordcount="100">

        </textarea>
        <br>
        <Button @click="submit" color="blue">提交评论</Button>
    </div>
</template>

<script>
export default {
    data () {
        return {
            msg: '商品评论页',
            name: '',
            price: '',
            img: '',
            //评论内容
            comment:'',
        }
    },

    //钩子方法
    mounted:function(){
        // 接收商品id
        var id = this.$route.query.id;
        this.id =id;

		// 调用商品信息接口
	    this.getdata();
    },

    //自定义方法
    methods:{
        // 商品信息接口
	    getdata: function () {
            // 发送请求
		    this.axios.get('http://localhost:8000/goodinfo/',{
			params: {
			  id: this.id,
			}}).then((result) =>{

			  console.log(result);
			  
			  this.name = result.data.name;
			  this.price = result.data.price;
      	    })
        },
        
        //提交评论
  	    submit:function(){

            if(this.comment==''){

                this.$Message("评论不能为空");
                return false;
            }

            this.comment = this.comment.replace(/ /g,'');

            if(this.comment.length > 100){

                this.$Message("超出了长度限制");
                return false;
            }

            //请求入库
            //发送请求
            this.axios.post('http://172.16.171.131:8000/commentinsert/',this.qs.stringify({uid:localStorage.getItem("uid"),gid:this.id,content:this.comment})).then((result) =>{

            console.log(result);

            this.$Message(result.data.message);

            //this.get_comments();

            //添加评论数据

            this.commentlist.unshift({'uid':localStorage.getItem("uid"),'content':this.comment});

        });


  	    },
    },
}
</script>

<style>
    
</style>